import React, { Component } from 'react'
import {
  TopicWrapper,
  TopicItem,
  ItemContent,
  ItemDesc,
  ItemTools,
  ItemBtn
} from '../style'
import {  connect } from 'react-redux'
import { actionCreators } from '../store' 

class Topic extends Component {
  constructor(props) {
    super(props)
    this.state = {
      readWord: '展开全部'
    }
  }
  render() {
    const { topicList, readMore, closeDesc, handleLike }  = this.props
    // console.log(topicList)
    return (
      <TopicWrapper>
        {
          topicList.map((item) => {
            return (
              <TopicItem key={item.get('id')}>
                <h3 className='topic-title'>{item.get('title')}</h3>
                {
                  !item.get('isDisplay') 
                    ? 
                    <ItemContent>
                      <img src={item.get('imgUrl')} alt='pic' />
                      <p className='topic-content'>
                        {item.get('desc')}
                        <span onClick={() => readMore(item.get('id'))} className='read-more'>{this.state.readWord}</span>
                      </p>
                    </ItemContent>
                    :
                    <ItemDesc>
                      <span onClick={() => closeDesc(item.get('id'))} className='read-more'>{this.state.readWord}</span>
                    </ItemDesc>
                }
                <ItemTools>
                  <ItemBtn onClick={() => handleLike(item.get('id'))}><i className='iconfont'>&#xe601;</i>赞同 {item.get('likeCount')}</ItemBtn>
                  <i className='iconfont trangle'>&#xe644;</i> 
                  <span><i className='iconfont icon'>&#xe674;</i>{item.get('commentCount')}条评论</span>
                  <span><i className='iconfont icon'>&#xe685;</i>分享</span>
                  <span><i className='iconfont icon'>&#xe66b;</i>收藏</span>
                  <span><i className='iconfont icon'>&#xe69d;</i>喜欢</span>
                </ItemTools>
              </TopicItem>
            )
          })
        }
      </TopicWrapper>
    )
  }
}

const mapState = (state) => {
  return {
    topicList: state.getIn(['home', 'topicList'])
  }
}

const mapDispatch = (dispatch) => {
  return {
    readMore(id) {
      dispatch(actionCreators.changeItemDisplayTrue(id))
    },
    closeDesc(id) {
      dispatch(actionCreators.changeItemDisplayFalse(id))
    },
    handleLike(id) {
      dispatch(actionCreators.like(id))
    }
  }
}

export default connect(mapState, mapDispatch)(Topic)